<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>footer</title>
    <style th:fragment="style">
        footer{
            width: 100%;
            height: 20em;
            background-color: rgb(51, 51, 51);
            position: relative;
            display: flex;
            flex-flow:row wrap;
            justify-content:start;
            top: -0.1em;
        }
        footer>div{
            position: relative;
            top: 2em;
            width: 33.33%;
            height: 80%;
        }
        footer>div:nth-child(2){
            border-right: rgb(255,255,255,0.2) solid 1px;
            border-left: rgb(255,255,255,0.2) solid 1px;
        }
        .footer_logo{
            width: 40%;
            height: 40%;
            margin: 0 auto;
            text-align: center;
        }
        .select_language{
            width: 40%;
            height: 60%;
            margin: 0 auto;
        }
        .select_language>select{
            position: relative;
            top: 2em;
        }
        .footer_span_nav{
            position: relative;
            top: 2em;
            width: 90%;
            height: 25%;
            margin: 0 auto;
        }
        .contact{
            position: relative;
            top: 2em;
            width: 90%;
            height: 25%;
            margin: 0 auto;
        }
        .partner{
            position: relative;
            top: 2em;
            width: 90%;
            height: 25%;
            margin: 0 auto;
        }
        .footer_span_nav>span{
            margin-right: 0.5em;
            color: #ffffff;
            position: relative;
            top: 0.5em;
            font-size: 0.8em;
        }
        .contact>span{
            margin-right: 0.5em;
            color: rgb(194,194,194);
            position: relative;
            top: 0.5em;
            font-size: 0.8em;
        }
        .partner>span{
            margin-right: 0.5em;
            color: rgb(194,194,194);
            position: relative;
            top: 0.5em;
            font-size: 0.8em;
        }
        footer>div:nth-child(3)>div{
            margin: 1em;
            width: 12%;
            height: 4em;
            float: left;
            position: relative;
            left: 3em;
            top: 2em;
        }
        footer>div:nth-child(3)>div:nth-child(1){
             background-image: url("../image/footerlogo (1).png");
             background-repeat: no-repeat;
             background-size: 100% 100%;
         }
        footer>div:nth-child(3)>div:nth-child(2){
            background-image: url("../image/footerlogo (2).png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        footer>div:nth-child(3)>div:nth-child(3){
            background-image: url("../image/footerlogo (3).png");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>
<footer th:fragment="footer">
    <div>
        <div class="footer_logo">
            <span style="color: #fff;float: bottom;">logo</span>
        </div>
        <div class="select_language">
            <select class="form-control">
                <option>简体中文</option>
                <option>繁体中文</option>
            </select>
        </div>
    </div>
    <div>
        <div class="footer_span_nav">
            <span>关于我们</span>
            <span>版权声明</span>
            <span>商务合作</span>
            <span>官方商城</span>
            <span>常见问题</span>
            <span>申请认证</span>
            <span>申请供图</span>
            <span>API申请</span>
            <span>管理公约</span>
            <span>加入我们</span>
        </div>
        <div class="contact">
            <span>QQ群：891040171</span>
            <span>792993575</span>
        </div>
        <div class="partner">
            <span>合作伙伴：</span>
            <span>百度XR</span>
            <span>pico</span>
            <span>3D播播</span>
            <span>泰科易</span>
            <span>小红屋utovr</span>
            <span>北京装修景点讲解</span>
            <span>爱奇艺VR</span>
            <span>93913虚拟现实</span>
            <span>百科图片</span>
            <span>新浪VR</span>
        </div>
    </div>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</footer>
</body>
</html>